Definition List (list style)

Add a description to a term in this styled Description list. Love us some semantic HTML

Rendered Component

CAP: Computing Accounts and Passwords; a team within the IT Service Center that specifically handles access requests and Brown username/password issues.
CIS: Computing & Information Services, our department’s former name; Help is on the way
CR: Change Request: A type of ticket that is requesting a change to an existing business system. A CR may involve a minor or more significant change.
DCC: Department Computing Coordinator; Cheese; bacon
DLD: Digital Learning & Design - part of the Sheridan Center for Teaching and Learning
EAS: Enterprise Applications and Software Engineering

HTML

<dl>
  <dt class="definition-list-term">CAP</dt>
  <dd class="definition-list-definition">Computing Accounts and Passwords; a team within the IT Service Center that specifically handles access requests and Brown username/password issues. </dd>
  <dt class="definition-list-term">CIS</dt>
  <dd class="definition-list-definition">Computing &amp; Information Services, our department’s former name</dd>
  <dd class="definition-list-definition">Help is on the way</dd>
  <dt class="definition-list-term">CR: Change Request </dt>
  <dd class="definition-list-definition">A type of ticket that is requesting a change to an existing business system. A CR may involve a minor or more significant change.</dd>
  <dt class="definition-list-term">DCC</dt>
  <dd class="definition-list-definition">Department Computing Coordinator</dd>
  <dd class="definition-list-definition">Cheese</dd>
  <dd class="definition-list-definition">bacon</dd>
  <dt class="definition-list-term">DLD</dt>
  <dd class="definition-list-definition">Digital Learning &amp; Design - part of the Sheridan Center for Teaching and Learning</dd>
  <dt class="definition-list-term">EAS</dt>
  <dd class="definition-list-definition">Enterprise Applications and Software Engineering</dd>
</dl>

CSS

.definition-list-term {
    font-weight: 700;
    margin: 1rem 0;
}
.definition-list-definition {
    margin-left: 1rem;
}
.definition-list-definition:before {
    content: "●" / "";
    color: #c00404;
    margin-right: 0.75rem;
}